import React, { useId, useState } from 'react'
import styles from './index.module.scss'
import cm from 'classnames'

const Index = props => {
  const {
    width = 46,
    defaultChecked = false,
    disabled = false,
    activeColor = 'var(--theme-color)',
    unActiveColor = '#333333',
    className
  } = props
  const [checked, setChecked] = useState(defaultChecked)
  const switchId = useId()

  const change = () => {
    const currentValue = !checked
    setChecked(currentValue)
    props?.onChange?.(currentValue)
  }
  return (
    <div className={cm(styles.switchBox, className)} style={{ width }}>
      <input
        disabled={disabled}
        type="checkbox"
        id={switchId}
        className={styles.checks}
        onChange={change}
        checked={checked}
      />
      <label
        htmlFor={switchId}
        className={styles.switch}
        style={{ backgroundColor: checked ? activeColor : unActiveColor }}
      ></label>
    </div>
  )
}

const Switch = React.memo(Index)

export default Switch
